<template>
  <div class="search">
    <Header title="搜索">
      <template v-slot:left>
        <span @click="goto()">&lt;</span>
      </template>
    </Header>
    <!-- 搜索框 -->
    <div class="input-box">
      <input type="text" placeholder="输入商家" v-model="ssText" @input="search" />
    </div>
    <!-- 展示搜索结果 -->
    <div class="list">
      <router-link
        :to="{name:'detail',params: item }"
        class="item"
        v-for="(item,index) in sslist"
        :key="index"
      >
        <div class="img">
          <img :src="item.pic" alt />
        </div>
        <div class="text">
          <h4 class="name">{{item.name}}</h4>
          <div class="yx">月销：{{item.yx}}</div>
          <div class="qs">
            <span>起送￥{{item.qs}}</span>
            <span>{{item.km}}km</span>
          </div>
          <div class="mj">
            <span>{{item.xm}}减{{item.xmj}}</span>
            <span>{{item.zm}}减{{item.zmj}}</span>
            <span>{{item.dm}}减{{item.dmj}}</span>
          </div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
import Header from "../../components/Header";
export default {
  components: {
    Header
  },
  data() {
    return {
      list: [], //源数据
      sslist: [], //搜索结果
      ssText: "" //搜索文本
    };
  },
  mounted() {
    this.list = this.$route.params.list;
  },
  methods: {
    search() {
      //搜索,并保存搜索结果到  sslist
      if (this.ssText.trim())
        this.sslist = this.list.filter(item => {
          return item.name.includes(this.ssText);
        });
      console.log(this.sslist);
    } /* 点击返回 */,
    goto() {
      this.$router.push({
        name: "home"
      });
    }
  }
};
</script>

<style>
</style>